<template>
  <div>
    <van-overlay :show="overlay"/>
    <article class="wrapper">
      <nav class="left_navigate">
        <div class="left_navigate_item" :class="currentTabId==0?'active':''" @click="switchTab(0)">
          <div>全部</div>
        </div>
        <div
          class="left_navigate_item"
          v-for="type of types"
          :key="type.id"
          :class="currentTabId==type.id?'active':''"
          @click="switchTab(type.id)"
        >
          <div>{{type.text}}</div>
        </div>
      </nav>
      <section class="main">
        <nav class="main_nav">{{currentType}}</nav>
        <div v-if="tempProducts.length==0" class="no_product">
          <img src="../assets/images/no_image.png" style="width:80px;height:60px;" />
          <div>该分类暂时没有商品</div>
          <div>请客官选择其他分类</div>
        </div>
        <div v-else>
          <div
            v-for="product of tempProducts"
            v-bind:key="product.id"
            class="item"
            v-on:click="navigateToDetail(product.id)">
            <div class="item_texts">
              <img :src="product.imageUrl" style="width:100px;height:70px" />
              <div style="margin-left:5px;">
                <div class="item_texts_title">{{product.name}}</div>
                <div class="item_texts_delete">￥{{product.price}}</div>
                <div class="item_texts_real">￥{{product.real}}</div>
              </div>
            </div>
            <div>
              <div style="margin:5px 5px 30px 5px;text-align: right;">
                <span style>已售：{{product.number}}</span>
              </div>
              <button-group :product="product"></button-group>
            </div>
          </div>
        </div>
      </section>
    </article>
    <bottom class="bottom" :class="emptyCarts?'bottom_show':''" v-on:toggleOverlay="showOverlay"></bottom>
  </div>
</template>

<script>
import Bottom from "@/components/Bottom.vue";
import ButtonGroup from "@/components/ButtonGroup.vue";
import axios from "axios";

export default {
  components: {
    Bottom,
    ButtonGroup
  },
  async created() {
    try {
      this.$bus.$on("showBottom", boolean => (this.emptyCarts = boolean));
      this.$bus.$on("clearProducts", () =>
        this.products.forEach(item => (item.count = 0))
      );
      const productsResponse = await axios.get("api/v1/products");
      const typesResponse = await axios.get("api/v1/types");
      this.types = typesResponse.data.types;
      this.products = productsResponse.data.products;
      this.tempProducts = productsResponse.data.products;
    } catch (error) {
      window.console.log(error);
    }
  },
  methods: {
    switchTab: function(tabId) {
      this.currentTabId = tabId;
      if (tabId == 0) {
        this.tempProducts = this.products;
        this.currentType = "全部";
      } else {
        this.tempProducts = this.products.filter(
          element => tabId == element.typeId
        );
        this.currentType = this.types.find(item => item.id == tabId).text;
      }
    },
    navigateToDetail: function(id) {
      let _this = this;
      _this.$router.push({ name: "Detail", params: { id: id } });
    },
    showOverlay:function(bool){
      window.console.log(bool);
      this.overlay=bool;
    }
  },
  data() {
    return {
      currentTabId: 0,
      currentType: "全部",
      types: [],
      tempProducts: [],
      products: [],
      showBottom: false,
      emptyCarts: false,
      overlay:false
    };
  }
};
</script>
<style lang="scss" scoped>
$default-background-color: #f3f5f8;
.wrapper {
  background-color: white;
  display: flex;
  flex-direction: row;
}
.left_navigate {
  background-color: $default-background-color;
}
.left_navigate_item {
  width: 80px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.active {
  background-color: white;
  border-left: 3px solid red;
}
.main {
  flex-grow: 1;
}
.main_nav {
  height: 25px;
  font: bold 15px/25px "宋体";
  padding-left: 10px;
  border-left: 3px solid red;
}
.no_product {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}
.bottom {
  position: fixed;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 0px;
  background-color: $default-background-color;
  opacity: 0;
  transform: translateY(0);
  transition: 0.5s;
}
.bottom_show {
  height: auto;
  transform: translateY(1);
  opacity: 1;
}
.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  background-color: white;
  padding: 5px;
  font-size: 1.1rem;
}
.item_texts {
  font-size: 12px;
  padding-top: 3px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.item_texts_title {
  margin-left: 5px;
  font-size: 13px;
  font-weight: 700;
}
.item_texts_delete {
  text-decoration: line-through;
  margin-top: 10px;
  margin-left: 2px;
}
.item_texts_real {
  color: red;
  font-size: 15px;
  font-weight: 800;
  margin-top: 10px;
}
</style>